<template>
	<view class="tabs">
		<!-- 公建芯造 -->
		<view class="tab-bar">
			<view :class="tabIndex==0 ? 'title title-active' : 'title'" @click="ontabtap()">
				<text>项目进度</text>
			</view>
			<view :class="tabIndex==1 ? 'title-active title' : 'title'" @click="ontabtap()">
				<text>项目大事件</text>
			</view>
		</view>
		<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" popMenu="false" @fabClick="tapFab()" />
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="base-content">
					<text>时间筛选</text>
					<view class="taglist">
						<text>今天</text>
						<text>近7天</text>
						<text>近一个月</text>
						<text>近半年</text>
						<text>全部</text>
					</view>
				</view>
				<view class="base-content">
					<text>分类筛选</text>
					<view class="taglist">
						<text>园林景观</text>
						<text>近7天</text>
						<text>近一个月</text>
						<text>近半年</text>
						<text>全部</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<swiper :current="tabIndex" class="swiper-box">
			<swiper-item class='project-progress'>
				<!-- <scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
					<view v-for="(newsitem,index2) in tab.data" :key="newsitem.id">
						<project-item></project-item>
					</view>
					<view class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
						<text class="loading-more-text">{{tab.loadingText}}</text>
					</view>
				</scroll-view> -->

				<!-- <empty-data-tip></empty-data-tip> -->
				<view class="project-box">
					<view class="title" @click="goToProgress()">
						<text>近7天 · 景观园林 ></text>
					</view>
					<view class="pixs">
						<view class="pix-box">
							<image src="/static/test.png" class="pix"></image>
							<view class="buttom">
								<text class="photographer">拍摄者：赵四</text>
								<text class="date">11/21 15:27</text>
							</view>
						</view>
						<view class="pix-box">
							<image src="/static/test.png" class="pix"></image>
							<view class="buttom">
								<text class="photographer">拍摄者：赵四</text>
								<text class="date">11/21 15:27</text>
							</view>
						</view>
						<view class="pix-box">
							<image src="/static/test.png" class="pix"></image>
							<view class="buttom">
								<text class="photographer">拍摄者：赵四</text>
								<text class="date">11/21 15:27</text>
							</view>
						</view>
						<view class="pix-box">
							<image src="/static/test.png" class="pix"></image>
							<view class="buttom">
								<text class="photographer">拍摄者：赵四</text>
								<text class="date">11/21 15:27</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="breaking-news">
				<view class="project-box">
					<view class="title" @click="goTobreakingNews()">
						<text>近7天 · 消防验收完成 ></text>
					</view>
					<view class="pixs">
						<view class="pix-box">
							<image src="/static/test.png" class="pix"></image>
							<view class="buttom">
								<text class="photographer">拍摄者：赵四</text>
								<text class="date">11/21 15:27</text>
							</view>
						</view>
						<view class="pix-box">
							<image src="/static/test.png" class="pix"></image>
							<view class="buttom">
								<text class="photographer">拍摄者：赵四</text>
								<text class="date">11/21 15:27</text>
							</view>
						</view>
						<view class="pix-box">
							<image src="/static/test.png" class="pix"></image>
							<view class="buttom">
								<text class="photographer">拍摄者：赵四</text>
								<text class="date">11/21 15:27</text>
							</view>
						</view>
						<view class="pix-box">
							<image src="/static/test.png" class="pix"></image>
							<view class="buttom">
								<text class="photographer">拍摄者：赵四</text>
								<text class="date">11/21 15:27</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pattern: {
					buttonColor: "#E62129"
				},
				newsList: [],
				cacheTab: [],
				scrollInto: "",
				showTips: false,
				navigateFlag: false,
				tabIndex: 0,
			};
		},
		methods: {
			tapFab() {
				this.$refs.popup.open('right')
			},
			ontabtap() {
				if (this.tabIndex) {
					this.tabIndex = 0
				} else {
					this.tabIndex = 1
				}
				// this.switchTab(this.tabIndex);
			},
			goTobreakingNews(){
				uni.navigateTo({
					url: '/minepkg/breaking_news/breaking_news'
				})
			},
			goToProgress() {
				uni.navigateTo({
					url: '/minepkg/progress_detail/progress_detail'
				})
			},
			switchTab(index) {
				// if (this.newsList[index].data.length === 0) {
				// 	this.getList(index);
				// }

				// if (this.tabIndex === index) {
				// 	return;
				// }

				// // 缓存 tabId
				// if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
				// 	let isExist = this.cacheTab.indexOf(this.tabIndex);
				// 	if (isExist < 0) {
				// 		this.cacheTab.push(this.tabIndex);
				// 		//console.log("cache index:: " + this.tabIndex);
				// 	}
				// }

				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].id;

				// // 释放 tabId
				// if (this.cacheTab.length > MAX_CACHE_PAGE) {
				// 	let cacheIndex = this.cacheTab[0];
				// 	this.clearTabData(cacheIndex);
				// 	this.cacheTab.splice(0, 1);
				// 	//console.log("remove cache index:: " + cacheIndex);
				// }
			},
			// clearTabData(e) {
			// 	this.newsList[e].data.length = 0;
			// 	this.newsList[e].loadingText = "加载更多...";
			// },
			// getList(index) {
			// 	let activeTab = this.newsList[index];
			// 	let list = [];
			// 	for (let i = 1; i <= 10; i++) {
			// 		let item = Object.assign({}, newsData['data' + Math.floor(Math.random() * 5)]);
			// 		item.id = this.newGuid();
			// 		list.push(item);
			// 	}
			// 	activeTab.data = activeTab.data.concat(list);
			// },
			// goDetail(e) {
			// 	if (this.navigateFlag) {
			// 		return;
			// 	}
			// 	this.navigateFlag = true;
			// 	uni.navigateTo({
			// 		url: './detail/detail?title=' + e.title
			// 	});
			// 	setTimeout(() => {
			// 		this.navigateFlag = false;
			// 	}, 200)
			// },
			// close(index1, index2) {
			// 	uni.showModal({
			// 		content: '是否删除本条信息？',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				this.newsList[index1].data.splice(index2, 1);
			// 			}
			// 		}
			// 	})
			// },
			// loadMore(e) {
			// 	setTimeout(() => {
			// 		this.getList(this.tabIndex);
			// 	}, 500)
			// },
		}
	}
</script>

<style lang="scss">
	.tab-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;

		.title {
			text-align: center;
			display: inline-block;
			color: #999999;
		}

		.title-active {
			color: #333333;
			border-bottom: 4rpx solid #E43D33;
		}
	}

	.swiper-box {
		height: 2516rpx;
	}

	.project-box {
		.title {
			margin-top: 20rpx;
			margin-left: 30rpx;
		}

		.pixs {
			display: flex;
			flex-wrap: wrap;

			.pix-box {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				margin: 30rpx 0 0 30rpx;
				background: #FFFFFF;
				width: 335rpx;
				height: 345rpx;
				border-radius: 20rpx;

				.pix {
					width: 335rpx;
					height: 335rpx;
				}

				.buttom {
					width: 335rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					padding-left: 20rpx;
					padding-bottom: 17rpx;

					.photographer {
						margin-top: 18rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.date {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
				}

			}
		}
	}

	.popup-content {
		width: 460rpx;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		padding: 30rpx;
		background-color: #fff;
		border: 2rpx solid #efefef;

		.base-content {
			margin-top: 28rpx;
			padding: 20rpx;
			.taglist {
				display: flex;
				flex-flow: wrap;
				text {
					font-size: 24rpx;
					text-align: center;
					margin:20rpx 20rpx 10rpx 0;
					width: 120rpx;
					background: linear-gradient(0deg, #E93423 0%, #FB6858 100%);
					border-radius: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
